<script setup>

import OperationLogService from "@/service/impl/OperationLogService.js"
import moduleJson from "@/components/page/moduleJson"
import dataJson from "@/components/page/dataJson"
import {onMounted} from "vue";
import {log} from "@/util/Log.js";
import OperationLogFindModel from "@/model/OperationLogFindModel.js";
import dayjs from "dayjs";


const data = dataJson()
const module = moduleJson()
const opLog = ref(new OperationLogFindModel())
const dateTimePicker = ref(null)

onMounted(() => {
    module.value.operations.show = false
    module.value.init(null, null,
        null, null, OperationLogService.url.find)
    module.value.operations.width = "300px"
    init()
})

const init = () => {
    if(!opLog.value.startTime || opLog.value.startTime.length < 1){
        let time = dayjs().format("YYYY-MM-DD")
        opLog.value.startTime = [time,time]
    }
    data.value.data = {
        name: opLog.value.name,
        method: opLog.value.method,
        startTime: opLog.value.startTime[0] + " 00:00:00",
        endTime: opLog.value.startTime[1] + " 23:59:59"
    }
    OperationLogService.find(data.value.source()).then(res => {
        data.value.init(res)
    }).catch(e => {
        log.info(e)
    })
}

const disabledDate =  (time) => {
    return time > dayjs() || dayjs().subtract(15, 'day') > time;
}

const removeFocus = () => {
    console.log(111)
    dateTimePicker.value.click()
    // document.body.focus()
    // dateTimePicker.value.blur();
}

</script>
<template>
    <Page
        :data="data"
        :module="module"
        @refresh="init"
        @search-open="module.search.load = false"
        @search-confirm="init"
        @pageSizeChange="(size) => data.pageSizeChange(size,init)"
        @pageCurrentChange="(current) =>data.pageCurrentChange(current,init)"
        @onShow="init"
    >
        <!-- 定义表格中的列有哪些 -->
        <template #table-column>
            <el-table-column prop="nickName" :label="$t('opLog.user')" min-width="50px"/>
            <el-table-column prop="logName" :label="$t('opLog.name')" min-width="50px"/>
            <el-table-column prop="logPath" :label="$t('opLog.path')"/>
            <el-table-column prop="logResultCode" :label="$t('opLog.code')" min-width="50px"/>
            <el-table-column prop="logTime" :label="$t('opLog.execTime')" min-width="50px"/>
            <el-table-column prop="createTime" :label="$t('opLog.createTime')" min-width="50px"/>
        </template>
        <!-- 当表格中的操作按钮没有你需要的时候可以额外再table-event中扩展 -->
        <template #after-table-event="row">
        </template>
        <!-- 定义详情、添加、编辑弹出层中的字段和数据 -->
        <template #table-dialog>
        </template>
        <!-- 搜索 -->
        <template #table-search>
            <el-form :rules="opLog.rules" :model="opLog" :label-width="100" :label-position="'left'" style="width: 100%;padding: 5px">
                <el-form-item :label="$t('opLog.name')" prop="name">
                    <el-input v-model="opLog.name" clearable autocomplete="off"/>
                </el-form-item>
<!--                <el-form-item :label="$t('opLog.method')" prop="email">-->
<!--                    <el-input v-model="opLog.method" autocomplete="off"/>-->
<!--                </el-form-item>-->
<!--                <el-form-item :label="$t('opLog.account')" prop="account">-->
<!--                    <el-input v-model="opLog.account" autocomplete="off"/>-->
<!--                </el-form-item>-->
                <el-form-item :label="$t('opLog.time')" prop="startTime">
                    <el-date-picker
                        ref="dateTimePicker"
                        v-model="opLog.startTime"
                        type="daterange"
                        range-separator="->"
                        :start-placeholder="$t('btn.startTime')"
                        :end-placeholder="$t('btn.endTime')"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        :disabled-date="disabledDate"
                        :editable="false"
                        clearable
                        @change="removeFocus"
                    />
                </el-form-item>
            </el-form>
        </template>
    </Page>
</template>

<style lang="scss" scoped>

</style>
